<template>
    <div>
      <Card>
        <Table size="small" ref="table" :columns="columns" :data="tdata" :loading="loading">
          <template slot-scope="{ row }" slot="clinic_name_arr">
              <Poptip word-wrap trigger="hover" placement="right" width="400">
                  <Tag v-for="(item, index) in row.clinic_name_arr" :key="index" v-if="index < 3">{{ item }}</Tag>
                  <div slot="content">
                      <Tag v-for="(item, index) in row.clinic_name_arr" :key="index">{{ item }}</Tag>
                  </div>
              </Poptip>
          </template>
          <template slot-scope="{ row, index }" slot="action">
              <a @click="handleAllocation(row.id)">编辑</a>
          </template>
        </Table>
        <div class="ivu-mt ivu-text-center">
          <Page
            :total="page.total"
            :current.sync="page.page"
            show-total
            show-elevator
            :page-size="page.pageSize"
            @on-change="formChangePage"
            :page-size-opts="pageOpts"
            show-sizer transfer
            @on-page-size-change="formSize"
          />
        </div>
      </Card>
      <Modal v-model="showCreate" :title="title" :mask-closable= "false" :loading="creating">
        <Form ref="create" :model="clinic" :rules="createRules" :label-width="80">
          <div class="whiteLabel">
            <span class="label">名称</span>
            <span class="name">{{ clinic.kefu_name }}</span>
          </div>
          <FormItem label="诊室">
            <Select v-model="clinic.clinic_ids" clearable multiple>
              <Option v-for="item in clinic.clinic_id_arr" :key="item.id" :value="item.id"> {{ item.name }}</Option>
            </Select>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button @click="handleDrawerCancel()">取消</Button>
          <Button type="primary" :loading="loading" @click="handleCreate('create')">确定</Button>
        </div>
      </Modal>
    </div>
</template>

<script>
    import { getWorkList, getWorkSetList, updateWorkList } from '@/api/setting'
    export default {
        name: 'business',
        data () {
            const checkHome = (rule, value, callback) => {
                if (value.length <= 0) {
                    callback(new Error('请选择诊室'))
                } else {
                    callback()
                }
            };
            return {
                clinic: {
                    kefu_id: '',
                    clinic_ids: [],
                    kefu_name: '',
                    clinic_id_arr: []
                },
                showCreate: false,
                title: '编辑',
                creating: true,
                loading: false,
                page: {
                    page: 1,
                    pageSize: 10,
                    total: 0
                },
                pageOpts: [10, 20, 30, 50],
                tdata: [],
                columns: [
                    {
                        title: '客服人员',
                        key: 'realname',
                        minWidth: 160
                    },
                    {
                        title: '诊室',
                        slot: 'clinic_name_arr',
                        minWidth: 160
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        minWidth: 160
                    }
                ],
                createRules: {
                    clinic_ids: [
                        {
                            required: false,
                            validator: checkHome,
                            trigger: 'change'
                        }
                    ]
                }
            }
        },
        mounted  () {
            this.getData()
        },
        methods: {
            handleAllocation (id) {
                if (id === '') return false
                this.showCreate = true
                this.creating = false
                const config = { kefu_id: id }
                getWorkSetList(config).then(res => {
                    this.clinic.kefu_id = res.id
                    this.clinic.kefu_name = res.realname
                    this.clinic.clinic_ids = res.clinic_id_arr
                    this.clinic.clinic_id_arr = res.condition.clinic_list || []
                    this.$nextTick(() => { this.creating = true })
                }).catch(() => {
                    this.$nextTick(() => { this.creating = true })
                })
            },
            getData () {
                const params = {
                    page: this.page.page,
                    pageSize: this.page.pageSize
                }
                this.loading = true
                getWorkList(params).then(res => {
                    this.loading = false
                    this.page.total = res.total
                    this.tdata = res.list
                }).finally(() => {
                    this.loading = false
                })
            },
            handleDrawerCancel () {
                this.showCreate = false
            },
            handleCreate (name) {
                const config = {
                    clinic_ids: this.clinic.clinic_ids.join(','),
                    kefu_id: this.clinic.kefu_id
                }
                updateWorkList(config).then(res => {
                    this.showCreate = false
                    this.$Message.success('编辑成功')
                    this.creating = false
                    this.getData()
                })
                // this.$refs[name].validate((valid) => {
                //     if (valid) {
                //         const config = {
                //             clinic_ids: this.clinic.clinic_ids.join(','),
                //             kefu_id: this.clinic.kefu_id
                //         }
                //         updateWorkList(config).then(res => {
                //             this.showCreate = false
                //             this.$Message.success('编辑成功')
                //             this.creating = false
                //             this.getData()
                //         })
                //     }
                // })
            },
            // 分页
            formChangePage (e) {
                this.page.page = e
                this.getData()
            },
            // 页数
            formSize (i) {
                this.page.pageSize = i
                this.getData()
            }
        }
    }
</script>

<style scoped>
</style>
